<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <!-- <el-button @click="prev" v-if="active == 2">上一步</el-button>
          <el-button @click="next" type="primary" v-if="active < 2" :loading="btnLoading">下一步
          </el-button> -->
          <el-button
            type="primary"
            @click="dataFormSubmit()"
            :loading="btnLoading"
          >
            保 存</el-button
          >
          <el-button @click="goBack"> 取 消</el-button>
        </div>
      </div>
      <!-- <el-steps :active="active" align-center style="margin-top: 10px;">
        <el-step title="步骤1"></el-step>
        <el-step title="步骤2"></el-step>
      </el-steps> -->

      <el-row
        :gutter="24"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          :rules="rules"
          size="small"
          label-width="100px"
          label-position="right"
        >
          <template v-if="!loading">
            <!-- <el-col :span="9">
                <el-form-item label="模板编码" prop="questCode">
                  <el-input
                    v-model.trim="dataForm.questCode"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                    maxlength="25"
                    show-word-limit
                  >
                  </el-input>
                </el-form-item>
              </el-col> -->
            <el-col :span="24" style="margin-top: 10px">
              <el-col :span="3" style="height: 100%">
                <div class="jsbos-common-title">
                  <h3>调查项类型</h3>
                </div>
                <div>
                  <div class="button-group">
                    <el-button
                      size="small"
                      icon="el-icon-plus"
                      @click="handleClick('radio')"
                    >
                      单选项
                    </el-button>
                    <el-button
                      size="small"
                      icon="el-icon-plus"
                      @click="handleClick('multiSelect')"
                    >
                      多选项
                    </el-button>
                    <el-button
                      size="small"
                      icon="el-icon-plus"
                      @click="handleClick('writing')"
                    >
                      填报项
                    </el-button>
                    <el-button
                      size="small"
                      icon="el-icon-plus"
                      @click="handleClick('scoring')"
                    >
                      打分项
                    </el-button>
                  </div>
                </div>
              </el-col>
              <el-col :span="21">
                <el-col :span="12">
                  <el-form-item label="模板名称" prop="questName">
                    <el-input
                      v-model.trim="dataForm.questName"
                      placeholder="请输入"
                      clearable
                      :style="{ width: '100%' }"
                      maxlength="25"
                      show-word-limit
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="模板分类" prop="questionnaireTypeId">
                    <TreeSelect
                      v-model="dataForm.questionnaireTypeId"
                      placeholder="请选择"
                      clearable
                      :options="questionnaireTypeIdOptions"
                      :props="questionnaireTypeIdProps"
                    >
                    </TreeSelect>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="模板描述" prop="description">
                    <el-input
                      v-model.trim="dataForm.description"
                      placeholder="请输入"
                      :style="{ width: '100%' }"
                      true
                      type="textarea"
                      :autosize="{ minRows: 3, maxRows: 4 }"
                      maxlength="225"
                      show-word-limit
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="21">
                  <div class="jsbos-common-title">
                    <h3>模板调查项</h3>
                  </div>
                  <div
                    v-if="
                      dataForm.oqquestionnaireitemList &&
                      dataForm.oqquestionnaireitemList.length != 0
                    "
                  >
                    <el-card
                      v-for="(item, i) in dataForm.oqquestionnaireitemList"
                      :key="i"
                      style="margin-top: 5px"
                    >
                      <div class="clearfix">
                        <el-button
                          type="text"
                          class="fr"
                          @click="removeCard(index)"
                          >删除</el-button
                        >
                      </div>
                      <el-form label-width="120px" label-position="right">
                        <el-col :span="18">
                          <div style="display: flex; align-items: center">
                            <span
                              v-if="item.isRequired == '1'"
                              style="color: red"
                              >*</span
                            >
                            <el-form-item
                              :label="`${i + 1}. 调查项类型:`"
                              style="margin-left: 5px; margin-bottom: 0"
                            >
                              <el-radio-group
                                v-model="item.itemType"
                                disabled
                                size="small"
                              >
                                <el-radio label="radio">单选</el-radio>
                                <el-radio label="multiSelect">多选</el-radio>
                                <el-radio label="writing">填报</el-radio>
                                <el-radio label="scoring">打分</el-radio>
                              </el-radio-group>
                            </el-form-item>
                          </div>
                        </el-col>
                        <el-col :span="18">
                          <el-form-item label="是否必填:">
                            <el-switch
                              v-model="item.isRequired"
                              active-text="是"
                              active-value="1"
                              inactive-text="否"
                              inactive-value="0"
                            >
                            </el-switch>
                          </el-form-item>
                        </el-col>
                        <el-col :span="18">
                          <el-form-item label="调查项名称:">
                            <el-input v-model="item.itemName"></el-input>
                          </el-form-item>
                        </el-col>

                        <el-col :span="18" v-show="isVisible">
                          <el-form-item label="调查项内容:">
                            <el-input v-model="item.itemText"></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="18" v-if="item.itemType == 'writing'">
                          <el-form-item label="">
                            <el-input
                              placeholder="请输入"
                              :style="{ width: '100%' }"
                              true
                              disabled
                              type="textarea"
                              :autosize="{ minRows: 3, maxRows: 4 }"
                              maxlength="225"
                              show-word-limit
                            >
                            </el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="18" v-if="item.itemType == 'scoring'">
                          <el-form-item label="">
                            <el-rate class="custom-rate"></el-rate>
                          </el-form-item>
                        </el-col>
                        <el-col :span="9">
                          <div
                            v-if="
                              item.itemType == 'radio' ||
                              item.itemType == 'multiSelect'
                            "
                            style="margin-bottom: 20px; margin-left: 100px"
                          >
                            <draggable
                              :list="item.itemArr"
                              :animation="340"
                              group="selectItem"
                              handle=".option-drag"
                            >
                              <div
                                v-for="(item, j) in item.itemArr"
                                :key="j"
                                class="select-item"
                                style="margin-top: 10px"
                              >
                                <div class="select-line-icon option-drag">
                                  <i
                                    class="icon-ym icon-ym-darg"
                                    style="cursor: pointer"
                                    @mousedown="mouseDownHandle(i)"
                                  />
                                </div>
                                <el-input
                                  v-model.trim="item.fullName"
                                  placeholder="选项名"
                                  size="small"
                                  show-word-limit
                                  maxlength="14"
                                  @input="setSelectValue(i)"
                                />
                                <div
                                  class="close-btn select-line-icon"
                                  style="cursor: pointer; color: #f56c6c"
                                  @click="sliceHandle(i, j)"
                                >
                                  <i class="el-icon-remove-outline" />
                                </div>
                              </div>
                            </draggable>
                            <div style="margin-top: 10px">
                              <el-button
                                style="padding-bottom: 0"
                                icon="el-icon-circle-plus-outline"
                                type="text"
                                @click="addSelectItem(i)"
                                >添加选项
                              </el-button>
                            </div>
                          </div>
                        </el-col>
                      </el-form>
                    </el-card>
                  </div>
                  <div v-else>
                    <el-empty
                      description="点击题型可将题目添加到此区域"
                    ></el-empty>
                  </div>
                </el-col>
              </el-col>
            </el-col>
          </template>
        </el-form>
      </el-row>
      <!-- <el-row :gutter="24" class="main" :style="{ margin: '0 auto', width: '100%' }">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
          <template v-if="!loading">
            <el-col :span="3" style="height: 100%">
              <div class="jsbos-common-title">
                <h3>调查项类型</h3>
              </div>
              <div>
                <div class="button-group">
                  <el-button size="small" icon="el-icon-plus" @click="handleClick('radio')">
                    单选项
                  </el-button>
                  <el-button size="small" icon="el-icon-plus" @click="handleClick('multiSelect')">
                    多选项
                  </el-button>
                  <el-button size="small" icon="el-icon-plus" @click="handleClick('writing')">
                    填报项
                  </el-button>
                  <el-button size="small" icon="el-icon-plus" @click="handleClick('scoring')">
                    打分项
                  </el-button>
                </div>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="jsbos-common-title">
                <h3>模板调查项</h3>
              </div>
              <div v-if="dataForm.oqquestionnaireitemList && dataForm.oqquestionnaireitemList.length != 0">
                <el-card v-for="(item, i) in dataForm.oqquestionnaireitemList" :key="i" style="margin-top: 5px;">
                  <div slot="header" class="clearfix">
                    <el-button type="text" class="fr" @click="removeCard(index)">删除</el-button>
                  </div>
                  <el-form label-width="100px" label-position="right">
                    <el-col :span="18">
                      <el-form-item label="调查项类型:">
                        <el-radio-group v-model="item.itemType" disabled size="small">
                          <el-radio label="radio">单选</el-radio>
                          <el-radio label="multiSelect">多选</el-radio>
                          <el-radio label="writing">填报</el-radio>
                          <el-radio label="scoring">打分</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="调查项名称:">
                        <el-input v-model="item.itemName"></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="9">
                      <el-form-item label="调查项内容:">
                        <el-input v-model="item.itemText"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <div v-if="item.itemType == 'radio' || item.itemType == 'multiSelect'"
                        style="margin-bottom: 20px;margin-left: 100px;">
                        <draggable :list="item.itemArr" :animation="340" group="selectItem" handle=".option-drag">
                          <div v-for="(item, j) in item.itemArr" :key="j" class="select-item" style="margin-top: 10px">
                            <div class="select-line-icon option-drag">
                              <i class="icon-ym icon-ym-darg" style="cursor: pointer" @mousedown="mouseDownHandle(i)" />
                            </div>
                            <el-input v-model.trim="item.fullName" placeholder="选项名" size="small" show-word-limit
                              maxlength="14" @input="setSelectValue(i)" />
                            <div class="close-btn select-line-icon" style="cursor: pointer; color: #f56c6c"
                              @click="sliceHandle(i, j)">
                              <i class="el-icon-remove-outline" />
                            </div>
                          </div>
                        </draggable>
                        <div style="margin-top: 10px">
                          <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text"
                            @click="addSelectItem(i)">添加选项
                          </el-button>
                        </div>
                      </div>
                    </el-col>

                  </el-form>
                </el-card>
              </div>
              <div v-else>
                <el-empty description="点击题型可将题目添加到此区域"></el-empty>
              </div>
               <el-form-item label-width="0"> -->
      <!-- <el-table :data="dataForm.oqquestionnaireitemList" size="mini">
                  <el-table-column type="index" width="50" label="序号" align="center" />
                  <el-table-column prop="itemName" label="调查项名称">
                    <template slot="header">
                      <span class="required-sign">*</span>调查项名称
                    </template>
    <template slot-scope="scope">
                      <el-input v-model.trim="scope.row.itemName" placeholder="请输入" clearable :style="{ width: '100%' }"
                        maxlength="25" show-word-limit>
                      </el-input>
                    </template>
    </el-table-column>
    <el-table-column prop="itemType" label="调查项类型">
      <template slot="header">
                      <span class="required-sign">*</span>调查项类型
                    </template>
      <template slot-scope="scope">
                      <el-radio-group v-model="scope.row.itemType" size="small"
                        @input="clickHandle(scope.row, scope.$index)">
                        <el-radio-button label="radio">单选</el-radio-button>
                        <el-radio-button label="multiSelect">多选</el-radio-button>
                        <el-radio-button label="writing">填报</el-radio-button>
                        <el-radio-button label="scoring">打分</el-radio-button>
                      </el-radio-group> -->
      <!-- <el-select
                        v-model="scope.row.itemType"
                        placeholder="请选择"
                        clearable
                        :style="{ width: '100%' }"
                      >
                        <el-option
                          v-for="(item, index) in itemTypeOptions"
                          :key="index"
                          :label="item.fullName"
                          :value="item.enCode"
                          :disabled="item.disabled"
                        ></el-option>
                      </el-select> -->
      <!-- </template>
    </el-table-column>
    <el-table-column prop="itemText" label="调查项内容" width="300px">
      <template slot-scope="scope"> -->
      <!-- <el-input
                          v-if="
                            scope.row.itemType != 'radio' &&
                            scope.row.itemType != 'multiSelect'
                          "
                          v-model="scope.row.itemText"
                          placeholder="请输入"
                          :style="{ width: '100%' }"
                          true
                          type="textarea"
                          :autosize="{ minRows: 4, maxRows: 4 }"
                        >
                        </el-input> -->

      <!-- <el-checkbox-group v-if="
                        scope.row.itemType == 'radio' ||
                        scope.row.itemType == 'multiSelect'
                      " v-model="selectValue" disabled size="mini">
                        <el-checkbox-button v-for="value in scope.row.itemArr" :label="value.fullName"
                          :key="value.fullName">{{ value.fullName }}</el-checkbox-button>
                      </el-checkbox-group>
                    </template>
    </el-table-column>
    <el-table-column label="操作" width="50">
      <template slot-scope="scope">
                      <el-button size="mini" type="text" class="jsbos-table-delBtn"
                        @click="deloqquestionnaireitemList(scope.$index)">删除</el-button>
                    </template>
    </el-table-column>
    </el-table>
    <div class="table-actions" @click="addoqquestionnaireitemList()">
      <el-button type="text" icon="el-icon-plus">添加</el-button>
    </div>
    </el-form-item> -->
      <!-- </el-col> -->
      <!-- <el-col :span="6" style="height: 100%" v-if="selectisShow">
              <div class="jsbos-common-title">
                <h3>录入选项</h3>
              </div>
              <draggable :list="itemArr" :animation="340" group="selectItem" handle=".option-drag">
                <div v-for="(item, index) in itemArr" :key="index" class="select-item" style="margin-top: 10px">
                  <div class="select-line-icon option-drag">
                    <i class="icon-ym icon-ym-darg" style="cursor: pointer" @mousedown="mouseDownHandle" />
                  </div>
                  <el-input v-model.trim="item.fullName" placeholder="选项名" size="small" show-word-limit maxlength="14"
                    @input="setSelectValue" />
                  <div class="close-btn select-line-icon" style="cursor: pointer; color: #f56c6c"
                    @click="sliceHandle(index)">
                    <i class="el-icon-remove-outline" />
                  </div>
                </div>
              </draggable>
              <div style="margin-top: 10px">
                <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text"
                  @click="addSelectItem">添加选项
                </el-button>
              </div>
            </el-col> -->
      <!-- </template>
        </el-form>
      </el-row> -->
    </div>
  </transition>
</template>
<script>
import draggable from "vuedraggable";
import request from "@/utils/request";
import { getTypeListTree, getTypeList, getQuestionnaireTypeList } from "../api";
import { getDataInterfaceRes } from "@/api/systemData/dataInterface";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { isEmpty } from "@/utils/isEmpty";
import formValidate from "@/utils/formValidate";
export default {
  components: { draggable },
  props: [],
  data() {
    // 查询编码重复
    // const validateCode = (rule, value, callback) => {
    //   var form = {
    //     code: value,
    //     name: "",
    //   };
    //   getQuestionnaireTypeList(form).then((response) => {
    //     var flag = response.data;
    //     if (!isEmpty(this.dataForm.id)) {
    //       if (
    //         isEmpty(flag) ||
    //         (flag.length == 1 && flag[0].id == this.dataForm.id)
    //       ) {
    //         callback();
    //       } else {
    //         callback(new Error("编码重复"));
    //       }
    //     } else {
    //       if (isEmpty(flag)) {
    //         callback();
    //       } else {
    //         callback(new Error("编码重复"));
    //       }
    //     }
    //   });
    // };
    // 查询分类名称重复
    const validateName = (rule, value, callback) => {
      var form = {
        code: "",
        name: value,
      };
      getQuestionnaireTypeList(form).then((response) => {
        var flag = response.data;
        if (!isEmpty(this.dataForm.id)) {
          if (
            isEmpty(flag) ||
            (flag.length == 1 && flag[0].id == this.dataForm.id)
          ) {
            callback();
          } else {
            callback(new Error("名称重复"));
          }
        } else {
          if (isEmpty(flag)) {
            callback();
          } else {
            callback(new Error("名称重复"));
          }
        }
      });
    };
    return {
      isVisible: false,
      btnLoading: false,
      selectValue: "",
      leftspan: 25,
      itemArr: [],
      arrIndex: 0,
      active: 1,
      selectisShow: false,
      visible: false,
      loading: false,
      isDetail: false,
      dataForm: {
        questCode: "",
        questName: "",
        questionnaireTypeId: "",
        description: "",
        creatorUserId: "",
        creatorTime: "",
        oqquestionnaireitemList: [],
      },
      rules: {
        questName: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
          { validator: validateName, trigger: "blur" },
        ],
        // questCode: [
        //   {
        //     required: true,
        //     message: "请输入",
        //     trigger: "blur",
        //   },
        //   { validator: validateCode, trigger: "blur" },
        //   { validator: formValidate("enCode"), trigger: "blur" },
        // ],
        questionnaireTypeId: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
      },
      questionnaireTypeIdOptions: [],
      questionnaireTypeIdProps: {
        children: "children",
        label: "name",
        value: "id",
      },

      itemTypeOptions: [],
      //选项重复判断
      judgeItemRepeat: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getitemTypeOptions();
    this.getTypeListTree();
  },
  mounted() {},
  methods: {
    prev() {
      if (this.active == 1) return;
      this.active--;
    },
    next() {
      if (this.active == 2) return;
      this.active++;
    },
    handleClick(itemType) {
      this.itemArr = [];
      this.arrIndex = this.dataForm.oqquestionnaireitemList.length;
      console.log(this.arrIndex);
      this.dataForm.oqquestionnaireitemList.push({
        itemName: "",
        itemType: itemType,
        itemText: "",
        itemArr: [],
        isRequired: "",
      });
      if (itemType == "radio" || itemType == "multiSelect") {
        // this.arrIndex = 0;
        // this.dataForm.oqquestionnaireitemList[this.arrIndex].select = true;
        // this.leftspan = 18;
        // let s =
        //   this.dataForm.oqquestionnaireitemList[this.arrIndex].itemText.split(
        //     "；"
        //   );
        // if (s != []) {
        //   let a = s;
        //   if (a) {
        //     for (let i = 0; i < a.length; i++) {
        //       this.itemArr.push({ fullName: a[i], id: "" });
        //     }
        //   }
        // }
      } else {
        this.selectisShow = false;
        this.leftspan = 25;
      }
      // 使用$forceUpdate强制组件重新渲染
      this.$forceUpdate();
    },
    removeCard(index) {
      this.dataForm.oqquestionnaireitemList.splice(index, 1);
      this.$forceUpdate();
    },
    //点击单选多选触发填选项的组件
    clickHandle(e, index) {
      this.$nextTick(() => {
        this.itemArr = [];
        if (e.itemType == "radio" || e.itemType == "multiSelect") {
          this.arrIndex = index;
          this.selectisShow = true;
          this.leftspan = 18;
          let s =
            this.dataForm.oqquestionnaireitemList[this.arrIndex].itemText.split(
              "；"
            );

          if (s != []) {
            let a = s;
            if (a) {
              for (let i = 0; i < a.length; i++) {
                this.itemArr.push({ fullName: a[i], id: "" });
              }
            }
          }
        } else {
          this.selectisShow = false;
          this.leftspan = 25;
        }
      });
    },
    addSelectItem(index) {
      this.dataForm.oqquestionnaireitemList[index].itemArr.push({
        fullName: "",
        id: "",
      });
      this.$forceUpdate();
    },
    sliceHandle(i, j) {
      this.dataForm.oqquestionnaireitemList[i].itemArr.splice(j, 1);
      // this.itemArr.splice(index, 1);
      this.setSelectValue(i);
      this.$forceUpdate();
    },
    setSelectValue(i) {
      this.judgeItemRepeat = false;
      let itemArr = this.dataForm.oqquestionnaireitemList[i].itemArr;
      if (itemArr.length > 1) {
        let arr = itemArr;
        for (let i = 0; i < arr.length; i++) {
          //跳过最后一个元素的比较
          if (i + 1 == arr.length) {
            continue;
          }
          //判断相邻的元素是否相同
          if (arr[i].fullName == arr[i + 1].fullName) {
            this.$message({
              message: "选项不能重复",
              type: "warning",
              duration: 1000,
            });
            this.judgeItemRepeat = true;
          }
        }
      }
      let a = "";
      itemArr.forEach((item) => {
        a += item.fullName + "；";
      });
      this.dataForm.oqquestionnaireitemList[i].itemText = a.slice(
        0,
        a.length - 1
      );
      this.dataForm.oqquestionnaireitemList[i].itemArr = itemArr;
      this.getStandardValue();
    },
    mouseDownHandle(i) {
      setTimeout(() => {
        this.setSelectValue(i);
      }, 1000);
    },
    getStandardValue() {
      this.dataForm.oqquestionnaireitemList.forEach((element) => {
        if (element.itemText) {
          let a = element.itemName;
          element.itemName = ".";
          element.itemName = a;

          let arr = element.itemText.split("；");
          element.standardValue = arr;
          if (!element.selectValue) {
            element.selectValue = [];
          }
        }
      });
    },
    getTypeListTree() {
      var data = {
        parentId: "-1",
      };
      getTypeListTree(data).then((res) => {
        this.questionnaireTypeIdOptions = res.data;
      });
    },
    oqquestionnaireitemExist() {
      let isOk = true;
      if (this.dataForm.oqquestionnaireitemList.length === 0) {
        isOk = false;
        this.$message({
          message: "调查项类型不能为空",
          type: "warning",
          duration: 1000,
        });
        return isOk;
      } else {
        let names = this.dataForm.oqquestionnaireitemList.map(
          (item) => item["itemName"]
        );
        let nameSet = new Set(names);

        if (nameSet.size == names.length) {
          isOk = true;
          return isOk;
        } else {
          isOk = false;
          this.$message({
            message: "调查项名称不能重复",
            type: "warning",
            duration: 1000,
          });
          return isOk;
        }
      }
    },
    getitemTypeOptions() {
      getDictionaryDataSelector("435437180001719237").then((res) => {
        this.itemTypeOptions = res.data.list;
      });
    },
    goBack() {
      this.$emit("refresh");
    },
    clearData(data) {
      for (let key in data) {
        if (data[key] instanceof Array) {
          data[key] = [];
        } else if (data[key] instanceof Object) {
          this.clearData(data[key]);
        } else {
          data[key] = "";
        }
      }
    },
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/questionnaire/OqQuestionnaire/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        } else {
          this.clearData(this.dataForm);
        }
      });
      this.$store.commit("generator/UPDATE_RELATION_DATA", {});
    },

    judgeItemIsNull() {
      let isOk = false;
      for (let i = 0; i < this.dataForm.oqquestionnaireitemList.length; i++) {
        let arr = this.dataForm.oqquestionnaireitemList[i];
        if (arr.itemType == "radio" || arr.itemType == "multiSelect") {
          if (!arr.hasOwnProperty("itemArr")) {
            this.$message({
              message: "选项不能为空，请修改后提交！",
              type: "warning",
              duration: 1000,
            });
            isOk = true;
            return isOk;
          }
        }
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          if (!this.oqquestionnaireitemExist()) return;
          //判断选项是否重复，以及选项是否重复！
          if (this.judgeItemRepeat) {
            this.$message({
              message: "有选项重复，请修改后提交！",
              type: "warning",
              duration: 1000,
            });
            return;
          }
          //判断单选多选是否有空值
          if (this.judgeItemIsNull()) return;
          this.btnLoading = true;
          this.request();
        }
      });
    },
    request() {
      var _data = this.dataList();
      if (!this.dataForm.id) {
        request({
          url: "/api/questionnaire/OqQuestionnaire",
          method: "post",
          data: _data,
        }).then((res) => {
          this.btnLoading = false;

          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              this.visible = false;
              this.$emit("refresh", true);
            },
          });
        });
      } else {
        request({
          url: "/api/questionnaire/OqQuestionnaire/" + this.dataForm.id,
          method: "PUT",
          data: _data,
        }).then((res) => {
          this.btnLoading = false;

          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              this.visible = false;
              this.$emit("refresh", true);
            },
          });
        });
      }
    },
    addoqquestionnaireitemList() {
      let item = {
        questId: undefined,
        itemName: undefined,
        itemType: undefined,
        itemText: undefined,
      };
      this.dataForm.oqquestionnaireitemList.push(item);
    },
    deloqquestionnaireitemList(index) {
      this.dataForm.oqquestionnaireitemList.splice(index, 1);
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      for (let i = 0; i < _data.oqquestionnaireitemList.length; i++) {
        var _list = _data.oqquestionnaireitemList[i];
      }
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      for (let i = 0; i < _dataAll.oqquestionnaireitemList.length; i++) {
        var _list = _dataAll.oqquestionnaireitemList[i];
      }

      _dataAll.oqquestionnaireitemList.forEach((item) => {
        if (item.itemType == "radio" || item.itemType == "multiSelect") {
          item.itemArr = item.itemText.split("；");
          for (let i = 0; i < item.itemArr.length; i++) {
            item.itemArr[i] = {
              fullName: item.itemArr[i],
              id: "",
            };
          }
        }
      });
      this.dataForm = _dataAll;
    },
  },
};
</script>
<style lang="scss" scoped>
.user-form {
  overflow: auto;

  .main {
    padding: 10px 30px 0;
  }

  .el-select,
  .el-cascader,
  .el-date-editor {
    width: 100%;
  }
}

.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
}

.el-select {
  flex: 1;
}

.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #606266;
}

.button-group {
  display: flex;
  flex-direction: column;
  /* 设置为竖直方向 */
}

.button-group .el-button {
  margin: 5px 0px;
  /* 按钮之间的间距 */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.fr {
  float: right;
}

.custom-rate ::v-deep .el-rate__icon {
  font-size: 33px;
  /* 调整星星的大小 */
}
</style>
